<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>设备状态管理系统 - 增强版</title>
    <script src="../js/vue.global.prod.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        select, input {
            width: 100%;
            box-sizing: border-box;
            padding: 4px;
        }
        button {
            margin: 5px;
            padding: 6px 12px;
            cursor: pointer;
        }
        .btn-group {
            margin-bottom: 10px;
        }
        .highlight {
            background-color: #ffcccc;
        }
        .control-panel {
            margin-bottom: 10px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .add-device-form {
            display: flex;
            gap: 10px;
            flex-direction: column;
            width: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>设备状态管理系统</h2>

    <div class="control-panel">
        <button @click="fetchData">刷新数据</button>
        <button @click="saveAll">保存全部</button>
        <label>筛选设备：
            <select v-model="filterType">
                <option value="all">全部设备</option>
                <option value="ef">只看电子围栏 (EF)</option>
                <option value="hwds">只看红外对射 (HWDS)</option>
            </select>
        </label>
        <button @click="showAddDeviceForm = !showAddDeviceForm">添加设备</button>
    </div>

    <!-- 添加设备表单 -->
    <div v-if="showAddDeviceForm" class="add-device-form">
        <h3>添加新设备</h3>
        <label>设备类型：
            <select v-model="newDevice.type">
                <option value="ef">电子围栏 (EF)</option>
                <option value="hwds">红外对射 (HWDS)</option>
            </select>
        </label>
        <label>设备ID：<input type="text" v-model="newDevice.d_id" /></label>
        <label>设备号：<input type="number" v-model="newDevice.devNO" /></label>
        <label>区号：<input type="number" v-model="newDevice.zoneNO" /></label>
        <button @click="addDevice">确认添加</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>设备类型</th>
            <th>D_ID</th>
            <th>设备编号</th>
            <th>防区编号</th>
            <th>报警 (Alarm)</th>
            <th>布撤防 (Arm)</th>
            <th>在线状态 (DevOnline)</th>
            <th>被撬状态 (DevTamper)</th>
            <th>欠压状态 (DevDcLow)</th>
            <th>交流断电 (DevAcLoss)</th>
            <th>围栏报警 (FenceAlarm)</th>
            <th>线松弛 (FenceSlack)</th>
            <th>防剪触发 (FenceCut)</th>
            <th>围栏电压 (FenceDcVal)</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in filteredData" :key="index" :class="{ highlight: isAlarmed(item) }">
            <td>{{ getDeviceType(item) }}</td>
            <td>{{ item.d_id }}</td>
            <td>{{ item.devNO }}</td>
            <td>{{ item.zoneNO }}</td>

            <td>
                <select v-model="item.alarm">
                    <option v-for="(label, val) in alarmOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>
            <td>
                <select v-model="item.arm">
                    <option v-for="(label, val) in armOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>
            <td>
                <select v-model="item.devOnline">
                    <option v-for="(label, val) in onlineOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>
            <td>
                <select v-model="item.devTamper">
                    <option v-for="(label, val) in tamperOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>
            <td>
                <select v-model="item.devDcLow">
                    <option v-for="(label, val) in dcLowOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>
            <td>
                <select v-model="item.devAcLoss">
                    <option v-for="(label, val) in acLossOptions" :value="parseInt(val)">{{ label }}</option>
                </select>
            </td>

            <td>
                <div v-if="isFence(item)">
                    <select v-model="item.fenceAlarm">
                        <option v-for="(label, val) in fenceAlarmOptions" :value="parseInt(val)">{{ label }}</option>
                    </select>
                </div>
            </td>
            <td>
                <div v-if="isFence(item)">
                    <select v-model="item.fenceSlack">
                        <option v-for="(label, val) in fenceSlackOptions" :value="parseInt(val)">{{ label }}</option>
                    </select>
                </div>
            </td>
            <td>
                <div v-if="isFence(item)">
                    <select v-model="item.fenceCut">
                        <option v-for="(label, val) in fenceCutOptions" :value="parseInt(val)">{{ label }}</option>
                    </select>
                </div>
            </td>
            <td>
                <div v-if="isFence(item)">
                    <input type="number" v-model.number="item.fenceDcVal" min="0">
                </div>
            </td>

            <td>
                <button @click="updateItem(item)">保存</button>
                <button @click="deleteDevice(item)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                tableData: [],
                filterType: 'all',
                showAddDeviceForm: false,
                newDevice: {
                    type: 'ef',
                    d_id: '',
                    devNO: null,
                    zoneNO: null
                },
                alarmOptions: { 0: '恢复', 1: '报警' },
                armOptions: { 0: '撤防', 1: '布防', 2: '留守布防', 3: '高压布防', 4: '低压布防' },
                onlineOptions: { 0: '掉线', 1: '在线' },
                tamperOptions: { 0: '被撬恢复', 1: '被撬' },
                dcLowOptions: { 0: '欠压恢复', 1: '欠压' },
                acLossOptions: { 0: '交流断电恢复', 1: '交流断电' },
                fenceAlarmOptions: { 0: '恢复', 1: '短路报警', 2: '断路报警', 3: '触网报警' },
                fenceSlackOptions: { 0: '正常', 1: '线松弛' },
                fenceCutOptions: { 0: '正常', 1: '防剪触发' },
            }
        },
        computed: {
            filteredData() {
                if (this.filterType === 'all') return this.tableData;
                if (this.filterType === 'ef') return this.tableData.filter(item => this.isFence(item));
                if (this.filterType === 'hwds') return this.tableData.filter(item => !this.isFence(item));
                return this.tableData;
            }
        },
        methods: {
            fetchData() {
                axios.get('/getAllInfo')
                    .then(res => {
                        this.tableData = res.data;
                    })
                    .catch(err => {
                        console.error('获取数据失败:', err);
                        alert('获取数据失败，请检查服务器是否启动且允许跨域');
                    });
            },
            updateItem(item) {
                axios.post('/update', item)
                    .then(() => {
                        console.log('保存成功');
                    })
                    .catch(err => {
                        console.error('保存失败:', err);
                        alert('保存失败');
                    });
            },
            saveAll() {
                const promises = this.tableData.map(item => axios.post('/update', item));
                Promise.all(promises)
                    .then(() => {
                        alert('全部保存成功！');
                    })
                    .catch(() => {
                        alert('保存失败，请检查网络或服务器');
                    });
            },
            addDevice() {
                // 检查设备类型限制
                const newDevice = this.newDevice;
                if (newDevice.type === 'ef' && this.tableData.filter(item => this.isFence(item)).length >= 8) {
                    alert('电子围栏设备最多只能有 8 个');
                    return;
                }
                if (newDevice.type === 'hwds' && this.tableData.filter(item => !this.isFence(item)).length >= 1) {
                    alert('红外对射设备最多只能有 1 个');
                    return;
                }

                axios.post('/addDevice', newDevice)
                    .then(res => {
                        alert(res.data);
                        this.fetchData(); // 重新拉取数据
                        this.showAddDeviceForm = false; // 关闭表单
                    })
                    .catch(err => {
                        console.error('添加设备失败:', err);
                        alert('添加设备失败');
                    });
            },
            deleteDevice(item) {
                axios.post('/deleteDevice', item)
                    .then(res => {
                        alert(res.data);
                        this.fetchData(); // 重新拉取数据
                    })
                    .catch(err => {
                        console.error('删除设备失败:', err);
                        alert('删除设备失败');
                    });
            },
            isFence(item) {
                return item.fenceAlarm !== undefined;
            },
            getDeviceType(item) {
                return this.isFence(item) ? '电子围栏 (EF)' : '红外对射 (HWDS)';
            },
            isAlarmed(item) {
                return item.alarm === 1 || (item.fenceAlarm !== undefined && [1,2,3].includes(item.fenceAlarm));
            }
        },
        mounted() {
            this.fetchData();
        }
    }).mount('#app');
</script>
</body>
</html>
